<template>
  <div class="g-bd6">
    <div class="g-sd6">
      <h2 class="n-msgtit">我的消息</h2>
      <ul class="tab-box">
        <li class="j-iflag" :class="path==='/Private/At'?'z-slt':''">
          <router-link :to="{name:'At',query:{id:$route.query.id}}">
            <i class="u-icn u-icn-1"></i>
            <span>我的</span>
            <i class="u-bub"></i>
          </router-link>
        </li>
        <li class="j-iflag" :class="path==='/Private/Msg/MsgHome' || '/Private/Msg/MsgView'?'z-slt':''">
          <router-link :to="{name:'MsgHome',query:{id:$route.query.id}}">
            <i class="u-icn u-icn-2"></i>
            <span>私信</span>
            <i class="u-bub">
              <b class="f-alpha"></b>
              <em>8</em>
            </i>
          </router-link>
        </li>
        <li class="j-iflag" :class="path==='/Private/Comments'?'z-slt':''">
          <router-link :to="{name:'Comments',query:{id:$route.query.id}}">
            <i class="u-icn u-icn-3"></i>
            <span>评论</span>
            <i class="u-bub"></i>
          </router-link>
        </li>
        <li class="j-iflag" :class="path==='/Private/Notify'?'z-slt':''">
          <router-link :to="{name:'Notify',query:{id:$route.query.id}}">
            <i class="u-icn u-icn-4"></i>
            <span>通知</span>
            <i class="u-bub"></i>
          </router-link>
        </li>
      </ul>
      <div class="n-readall">
        一键已读
      </div>
    </div>
    <div class="g-mn6">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  computed:{
    path(){
      return this.$route.path
    }
  },
  mounted() {
  },
}
</script>

<style scoped lang="less">
.g-bd6 {
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-image: url("../../assets/wrap6.png");

  &:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }

  .g-sd6 {
    position: relative;
    float: left;
    width: 184px;

    .n-msgtit {
      height: 76px;
      padding: 32px 0 14px 40px;
      font-size: 20px;
      font-weight: normal;
      line-height: 30px;
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    }

    .tab-box {
      border-top: 1px solid #ddd;

      &:after {
        clear: both;
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
      }

      .z-slt {
        position: relative;
        width: 185px;
        a{
          background: #fff;
          border-right: 1px solid #fff;
        }
      }

      li {
        float: left;
        width: 184px;
        border-bottom: 1px solid #ddd;

        i {
          float: left;
          margin-top: 17px;
        }
      }

      .j-iflag {
        a {
          display: block;
          width: 144px;
          height: 53px;
          padding-left: 40px;
          line-height: 53px;
          text-decoration: none;
          color: #333;

          span {
            float: left;
            margin: 0 8px 0 6px;
          }

          .u-bub {
            display: block;
            position: relative;
            zoom: 1;
            width: 22px;
            height: 22px;
            color: #fff;
            text-align: center;
            line-height: 23px;
            font-weight: bold;

            em {
              float: none;
              display: block;
              position: relative;
              text-align: center;
              z-index: 2;
            }
          }

          .u-icn {
            width: 22px;
            height: 21px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-image: url("../../assets/icon.png");
          }

          .u-icn-1 {

            background-position: -64px -164px;
          }

          .u-icn-2 {
            background-position: -64px -193px;
          }

          .u-icn-3 {
            background-position: -64px -245px;
          }

          .u-icn-4 {
            background-position: -58px -400px;
          }

        }
      }
    }

    .n-readall {
      width: 112px;
      height: 28px;
      line-height: 28px;
      border: 1px solid rgba(0, 0, 0, 0.20);
      border-radius: 15px;
      text-align: center;
      margin: 20px auto 0;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.80);
      cursor: pointer;
    }
  }

  .g-mn6 {
    float: right;
    width: 100%;
    margin-left: -185px;
  }
}
</style>